<html>
<head>

</head>
<body>
<section class="content-header">
<#--main标题-->
    <h1>
        客户实时位置监控图
    </h1>
<#--右侧快捷导航栏-->
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 轨迹监控</a></li>
        <li class="active">实时位置</li>
    </ol>
</section>
<section class="content">

    <div id="track_history_detail">
    <#list locationInTime?keys as key>

        <div class="row">
            <div class="col-md-12">
            <#--<div class="box box-primary">-->
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">第${key}层</h3>
                    </div>
                    <div class="box-body">
                        <div class="row">
                            <div class="col-md-8">
                                <div class="box-body no-padding">
                                    <div style="width:100%; height:400px;
                                    <#if key=1>
                                            background:url(/img/map_new.jpg);
                                        <#else>
                                            background:url(/img/map2.jpeg);
                                    </#if>

                                    background-size:100% 100%; ">

                                        <#assign item = locationInTime[key]>
                                        <#list item as location>

                                            <div style="width:99%; height:99%;">

                                                <img class="point"
                                                    <#if location.status =1>
                                                    <#--正常-->
                                                        <#if location.upOrDown=1>
                                                        <#--上楼-->
                                                     src="/images/up_green.png"
                                                        <#elseif location.upOrDown=-1>
                                                        <#--下楼-->
                                                     src="/images/down_green.png"
                                                        <#else>
                                                     src="/images/green.png"
                                                        </#if>
                                                    <#else>
                                                    <#--预警-->
                                                        <#if location.upOrDown=1>
                                                        <#--上楼-->

                                                        <#elseif location.upOrDown=-1>
                                                        <#--下楼-->
                                                     src="/images/down_red.png"
                                                        <#else>
                                                     src="/images/red.png"
                                                        </#if>
                                                    </#if>
                                                     width="10px"; height="10px"; style="position:absolute; left: ${location.xPosition}px;bottom: ${location.yPosition}px;"
                                                     onclick="clickPositionPoint(this,${key},${location.xPosition},${location.yPosition},'${location.sampleTime?string("yyyy-MM-dd HH:mm:ss")}',${location.status},'${location.memberName}','${location.areaDesc}') ">

                                            </div>
                                        </#list>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <p class="lead">监控数据</p>

                                <div class="table-responsive">
                                    <table class="table">
                                        <tr>
                                            <th style="width:50%">楼层</th>
                                            <td id="floor${key}"></td>
                                        </tr>
                                        <tr>
                                            <th style="width:50%">客户姓名</th>
                                            <td id="memberName${key}"></td>
                                        </tr>
                                        <tr>
                                            <th>监控时间</th>
                                            <td id="time${key}"></td>
                                        </tr>
                                        <tr>
                                            <th>坐标位置</th>
                                            <td id="position${key}"></td>
                                        </tr>
                                        <tr>
                                            <th>状态</th>
                                            <td id="status${key}"></td>
                                        </tr>
                                        <tr>
                                            <th>区域</th>
                                            <td id="areaDesc${key}"></td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="box-footer">
                        <div class="row">
                            <div class="col-sm-3 col-sm-4 col-xs-6">
                                <div class="description-block border-right">
                                <#--<span class="description-percentage text-green"><i class="fa fa-caret-up"></i> 17%</span>-->
                                    <h5 class="description-header">
                                        <#if key=1>
                                            2
                                        <#else>
                                            1
                                        </#if>
                                        </h5>
                                    <span class="description-text">楼层停留人数</span>
                                </div>
                                <!-- /.description-block -->
                            </div>
                            <!-- /.col -->
                            <div class="col-sm-3 col-sm-4 col-xs-6">
                                <div class="description-block border-right">
                                <#--<span class="description-percentage text-yellow"><i class="fa fa-caret-left"></i> 0%</span>-->
                                    <h5 class="description-header">3</h5>
                                    <span class="description-text">总人数</span>
                                </div>
                                <!-- /.description-block -->
                            </div>
                            <!-- /.col -->
                            <div class="col-sm-3 col-sm-4 col-xs-6">
                                <div class="description-block border-right">
                                <#--<span class="description-percentage text-green"><i class="fa fa-caret-up"></i> 20%</span>-->
                                    <h5 class="description-header">0</h5>
                                    <span class="description-text">预警人数</span>
                                </div>
                                <!-- /.description-block -->
                            </div>

                        </div>
                        <!-- /.row -->
                    </div>
                </div>

            </div>
        </div>
    </#list>
    </div>


</section>


</body>
</html>